<div class="route-selector d-inline-flex" *ngIf="routes">
    <div ngbDropdown #dropId="ngbDropdown" placement="bottom-right">
        <button class="btn btn-outline-primary" id="sortMenu" ngbDropdownToggle [innerHTML]="getActiveRoute()"></button>
        <div ngbDropdownMenu aria-labelledby="sortMenu" aria-expanded="true" (click)="$event.stopPropagation()">
            <p class="d-flex">
                <input type="search" class="form-control d-flex search" placeholder="Search an application..."
                       [(ngModel)]="searchedInstance" (click)="$event.stopPropagation()" (input)="searchByAppName()">
            </p>
            <div *ngFor="let app of routes | groupBy : 'appName'">
                <span class="dropdown-header" (click)="$event.stopPropagation()">{{app.key}}</span>
                <button class="dropdown-item" *ngFor="let route of app.value"
                        (click)="setActiveRoute(route); closeDropDown(dropId);" [ngClass]="state(route)">

                    <span>{{route.appName | uppercase}} {{route.serviceId ? '(' + route.serviceId + ')' : '' }}</span>
                    <span class="badge badge-pill font-weight-normal" [ngClass]="getBadgeClassRoute(route)">
                        {{route.status}}
                    </span>
                </button>
            </div>
        </div>
    </div>

    <jhi-refresh-selector></jhi-refresh-selector>

    <p *ngIf="updatingRoutes && (!routes || routes.length == 0)">Loading...</p>
</div>
